<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.8.3.min.js"></script>
    <style>
        .section{
            width: 100%;
            height: 100%;
            position: relative;
            left: 0;
            right: 0;
            display: none;
        }
        .current{
            display: block;

        }
        .menu{
            position: fixed;
            z-index: 999;
            right: 0;
            top: 50%;
        }
    </style>
</head>
<body>
       <div class="menu">
        <button onclick="up()">朝上 </button>
        <button onclick="down()">朝下</button>
       </div> 
       <div id="fullpage" style="width:100%;height:100%;">
            <div class="section current">
                NO1
            </div>
            <div class="section">
                no2
            </div>
            <div class="section">
                    no3
            </div>
       </div>
       <script>
           function up(){
               var sur=$("#fullpage .section.current")
               cur.removeClass("current");
               var pr=cur.prev();
               if (pr.length<1){
                   pr=$("#fullpage .section").last();
                  }
               pr.addClass("current");
           }
           function down(){
               var cur=$("#fullpage .section.current")
               cur.removeClass("current");
               var ne=cur.next();
               if (ne.length<1){
                   ne=$("#fullpage .section").first();
               }
               ne.addClass("current");
           }
       </script>    
</body>
</html>